<template>
	<view class="page_box">
		<view class="head_box " v-if="0">
			<yy-custom bgColor="bg-gradual-blue">
				<block slot="backText">返回</block>
				<block slot="content">导航栏</block>
			</yy-custom>
		</view>

		<view class="content_box">
			<view class="head padding-lr bg-white flex align-center justify-between text-black margin-bottom">
				<text class="f28">
					合计数量(盒):
					<text class="margin-left f30">{{ sum }}</text>
				</text>
				<view class="" @click="show = true">
					<text class="f28">筛选</text>
					<text class="cuIcon-filter margin-left-xs"></text>
				</view>
			</view>
			<image :src="$IMG_URL" mode="aspectFill" class="pttd" v-if="data.length == 0"></image>
			<scroll-view scroll-y="true" class="scroll" @scrolltolower="lower">
				<block v-for="(item, index) in data" :key="index">
					<view class="info padding bg-white margin-bottom">
						<view class="flex justify-between align-center">
							<view class="flex align-center">
								<image
									:src="item.user.headimgurl"
									mode="aspectFill"
									style="width: 60rpx; height: 60rpx;"
									class="round "
								></image>
								<text class="f28px margin-left">
									{{ item.user.nickname ? item.user.nickname : '暂无昵称' }}
								</text>
							</view>
							<text class="f24 text-gray">{{ item.modifyDt }}</text>
						</view>
						<view class="padding-tb flex justify-between align-center ">
							<view class=" flex flex-direction">
								<view
									class="flex solid-bottom padding-tb-sm "
									v-for="(item, index) in item.order"
									:key="index"
								>
									<image
										:src="item.commodityImg"
										mode="aspectFill"
										style="width: 81rpx; height: 69rpx;"
										class=" "
									></image>
									<view class="flex flex-direction justify-around margin-left">
										<text class="f28 text-black">
											{{ item.commodityName }}（{{ item.commodityType }}）
										</text>
										<text class="f26 text-gray margin-top-xs">
											商品数量(盒)：{{ item.num }}
										</text>
									</view>
								</view>
							</view>

							<text class="f28 text-black">共{{ item.totle }}盒</text>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>

		<view class="foot_box">
			<u-popup v-model="show" mode="bottom" border-radius="14">
				<view class="model padding">
					<text class="f28px">类型</text>
					<scroll-view scroll-x="true" class="margin-tb w100 flex scroll-x">
						<button class="cu-btn btn " @click="click(0)" :class="aa == '' ? 'aa' : ''">
							不限
						</button>
						<button class="cu-btn btn " @click="click(1)" :class="aa == 1 ? 'aa' : ''">
							复合型
						</button>
						<button class="cu-btn btn " @click="click(2)" :class="aa == 2 ? 'aa' : ''">
							原生型
						</button>
					</scroll-view>
					<text class="f28px margin-top">来源</text>
					<scroll-view scroll-x="true" class="margin-tb w100 flex scroll-x">
						<button class="cu-btn btn " @click="click1(0)" :class="bb == '' ? 'aa' : ''">
							不限
						</button>
						<button class="cu-btn btn " @click="click1(1)" :class="bb == 1 ? 'aa' : ''">
							自己
						</button>
						<button class="cu-btn btn " @click="click1(2)" :class="bb == 2 ? 'aa' : ''">
							其他
						</button>
					</scroll-view>
					<view class="solid-bottom margin-tb"></view>
					<view class="flex justify-between align-center padding-tb">
						<button class="cu-btn empty " @click="empty">清空</button>
						<button class="cu-btn determine " @click="determine">确定</button>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			show: false,
			aa: 0,
			bb: 0,
			size: 10,
			current: 1,
			data: [],
			totle: '',
			fla: '',
			sum: ''
		};
	},
	onShow() {},
	onLoad(e) {
		this.myPerformance();
	},
	// onReachBottom() {
	// 	this.current++;
	// 	if (this.fla) {
	// 		this.myPerformance();
	// 	}
	// },
	methods: {
		async lower() {
			if (this.fla) {
				this.current++;
				this.myPerformance();
			}
		},
		async determine() {
			this.data.length = 0;
			this.current = 1;
			this.$refs.uToast.show({ title: '筛选成功~~', type: 'success' });
			this.myPerformance();
			this.show = false;
		},
		async myPerformance() {
			let obj = {
				userId: uni.getStorageSync('data').id,
				type: this.aa,
				source: this.bb,
				size: this.size,
				current: this.current
			};
			const res = await this.$u.get('performance/myPage', obj, {});
			if (res.code == 0) {
				res.data.data.length == 0 ? (this.fla = 0) : (this.fla = 1);
				this.data = [...this.data, ...res.data.data];
				this.sum = res.data.sum;
				console.log('this.data :>> ', this.data);
				// this.totle = res.data.totle
			}
		},
		async empty() {
			[this.aa, this.bb] = [0, 0];
		},
		async click(e) {
			this.aa = e;
		},
		async click1(e) {
			this.bb = e;
		},
		jump(url) {
			console.log('url: ', url);
			uni.navigateTo({
				url
			});
		}
		// click(index) {
		// 	console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`);
		// }
	}
};
</script>

<style lang="scss" scoped>
.page_box {
	background-color: #f7f7f7;

	.scroll {
		height: calc(100vh - 200px);
	}
	.content_box {
		.head {
			width: 100vw;
			height: 100rpx;
		}
	}
	.foot_box {
		.model {
			height: 480rpx;
			.empty {
				width: 266rpx;
				height: 80rpx;
				background: #f7f7f7;
				border-radius: 10rpx;

				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #717171;
			}
			.determine {
				width: 408rpx;
				height: 80rpx;
				background: #fbb03b;
				border-radius: 10rpx;

				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
			.scroll-x {
				height: 50rpx;
				white-space: nowrap;
				.aa {
					border: 1rpx solid #fbb03b;
				}
				.btn {
					// display: flex;
					// justify-content: center;
					// align-items: center;
					width: 220rpx;
					height: 50rpx;
					background: #f7f7f7;
					border-radius: 10rpx;

					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #717171;
					margin-left: 15rpx;
				}
			}
		}
	}
}
</style>
